import React from 'react';
import { connect } from 'react-redux';
import  AddItembankForm  from './AddItembankForm';
import QuestionSeletor from '../questions/QuestionSeletor' ; 
import QuestionList from '../questions/QuestionList' ;
import { relateWithQuestions,fetchRelatedQuestions,setItembankRelatedQuestions,removeRelatedQuestions } from '../../../actions/itembankActions' ;
import { Tabs, Icon ,Button } from 'antd';

var array = require('lodash/array');
const TabPane = Tabs.TabPane;

import './style.css';

class AddItembankPage extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            bankID :0,
            sourceData :[],
            loading:false,
            pagination: { pageSize:10,current:1,},
            selectedRowKeys:[],
            selectedRows:[],
            modalVisible:false,
        }
    }

    componentWillMount(){
        const { params: { id }} = this.props;
        if ( id ) {
            this.setState({bankID:parseInt(id,10)});
        }
    }

    handlerOk = (sourceData) => {
        if ( typeof(sourceData) !== "undefined") {
            var newQ = this.props.questions.concat(sourceData);
            newQ = array.uniqBy(newQ,`id`);
            this.props.setItembankRelatedQuestions(newQ);
        }
    }

    onFormSubmit = (data) => {
        this.setState({bankID:data.id}) ;
    }

    onTagChange = (key) => {
        if (key === "2" && this.state.bankID ){
            this.props.fetchRelatedQuestions(this.state.bankID).then(
                (res) => {console.log(res)}
            );
        }
    }

    saveRelateQuestions = () => {
        var questions = [];
        if ( !this.props.questions ) return ; 
        for ( let i = 0 ; i < this.props.questions.length;i++){
            questions.push(this.props.questions[i].id) ;
        }
        
        this.props.relateWithQuestions(this.state.bankID,questions).then(
            (res) => { console.log(res) ;}
        )
    }

    removeRelateQuestions = () => {
        var questions = [];
        var i = this.state.selectedRows.length ;
        while( i-- ) {
            questions.push(this.state.selectedRows[i].id) ;
        }   
        
        this.props.removeRelatedQuestions(this.state.bankID,questions).then(
            (res) => { this.props.setItembankRelatedQuestions(array.xorBy(this.props.questions,this.state.selectedRows,'id'));} 
        );
    }

    onQuestionSelect = (selectedRows) => {
        this.setState({selectedRows});
    }

    setModalVisible = (modalVisible) =>  {
        this.setState({ modalVisible });
    }

    render(){
        return (
             <div id="add-itembank-form">
                <Tabs defaultActiveKey="1" tabPosition="left" onChange={this.onTagChange}>
                    <TabPane tab={<span><Icon type="edit" />Base</span>} key="1">
                        <AddItembankForm  initID={this.state.bankID} onSubmit={this.onFormSubmit}/>
                    </TabPane>
                    <TabPane tab={<span><Icon type="select" />Questions</span>} key="2" disabled={!this.state.bankID}>
                        <div className="users-selector-actions" style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
                                <Button type="primary" onClick={this.saveRelateQuestions}>   保存更改           </Button>
                                <Button type="primary" onClick={() => this.setModalVisible(true)}>  添加题目   </Button>
                                <Button type="danger" onClick={this.removeRelateQuestions}>  移除题目         </Button>
                        </div>
                        <QuestionList 
                            sourceData={this.props.questions} 
                            onSelect={this.onQuestionSelect}
                        />
                    </TabPane>
                </Tabs>
                <QuestionSeletor onOk={this.handlerOk} visible={this.state.modalVisible} onClose={()=>this.setModalVisible(false)}/>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
  return {
     questions: state.itembank.related_questions,
   }
}

AddItembankPage.propTypes = {
    relateWithQuestions:React.PropTypes.func.isRequired,
    fetchRelatedQuestions:React.PropTypes.func.isRequired,
    setItembankRelatedQuestions:React.PropTypes.func.isRequired,
    removeRelatedQuestions:React.PropTypes.func.isRequired,
};


export default connect(mapStateToProps,{relateWithQuestions,fetchRelatedQuestions,setItembankRelatedQuestions,removeRelatedQuestions})(AddItembankPage);